<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        button {
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h3>测试cookie</h3>
    <button>设置cookie</button>
    <button>获取cookie</button>
    <button>删除cookie</button>


    <script src="./cookie.js"></script>
    <script>
        // 获取按钮标签
        var buttons = document.querySelectorAll("button");
        // 设置cookie
        buttons[0].onclick = function () {
            // console.log('1');
            setCookie("width","100px");
            setCookie("height","200px");
            setCookie("font-size","30px");
            setCookie("color","red");
            setCookie("color","blue");
        }

        // 获取cookie
        buttons[1].onclick = function () {
            // // console.log('2');
            // var w = getCookie("width");
            // console.log(w);
            console.log(getCookie("width"));
            console.log(getCookie("height"));
            console.log(getCookie("font-size"));
            console.log(getCookie("color"));
        }

        // 删除cookie
        buttons[2].onclick = function () {
            // console.log('3');
            removeCookie("color");
            removeCookie("width");
        }


    </script>
</body>

</html>